import React, { useState } from 'react';
import { Form, Input, Button, Table } from 'antd';

interface FormData {
  name: string;
  email: string;
}

const Department: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    name: '',
    email: '',
  });
  const [tableData, setTableData] = useState<string[]>([]);

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;

    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleAddRow = () => {
    setTableData((prevData) => [...prevData, formData.email]);
    setFormData({ ...formData, email: '' });
  };

  const columns = [
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
  ];

  return (
    <>
      <Form>
        <Form.Item label="姓名">
          <Input value={formData.name} onChange={handleInputChange} name="name" />
        </Form.Item>

        <Form.Item label="邮箱">
          <Input value={formData.email} onChange={handleInputChange} name="email" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" onClick={handleAddRow}>
            添加行
          </Button>
        </Form.Item>
      </Form>

      <Table dataSource={tableData.map((email, index) => ({ email, key: index }))} columns={columns} />
    </>
  );
};

export default Department;
